import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

import AutoImport from 'unplugin-auto-import/vite'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      //自动引入
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/types/auto-import.d.ts', // 路径下自动生成文件夹存放全局指令
    }),
    //svg插件-主要插入部分
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],//可能会出现‘process is not defined’报错，但并不影响
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    }),
  ],
  resolve: {
    // Vite路径别名配置
    alias: {
      '@': path.resolve('./src'),
    },
  },
  /*主要看下面这段*/
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: '@import "@/assets/styles/constant.scss";',
      },
    },
  },
  // chainWebpack:config=>{
  //   // svg图标加载
  //   config.module
  //     .rule('svg')
  //     .exclude.add(path.join(__dirname, 'src/assets/icons/svg'))
  //     .end()

  //   config.module
  //     .rule('icons')// 定义一个名叫 icons 的规则
  //     .test(/\.svg$/)// 设置 icons 的匹配正则
  //     .include.add(path.join(__dirname,'src/assets/icons/svg'))// 设置当前规则的作用目录，只在当前目录下才执行当前规则
  //     .end()
  //     .use('svg-sprite')// 指定一个名叫 svg-sprite 的 loader 配置
  //     .loader('svg-sprite-loader')// 该配置使用 svg-sprite-loader 作为处理 loader
  //     .options({// 该 svg-sprite-loader 的配置
  //       symbolId:'icon-[name]'
  //     })
  //     .end()
  // },
  server: {
    host: '0.0.0.0',
    port: 3000,
  },
})
